﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" /> 
    <meta name="description" content="jqxDateTimeInput provides support for localizing its input field and popup calendarfor different languages 
        and date formats. Each localization is contained within
        its own file with the language code appended to the name, e.g. jquery.glob.de-DE.js
        for German. The desired localization file should be loaded along with the jqxdatetimeinput.js.
        The localization is set to the jqxDateTimeInput instance by setting the jqxDateTimeInput's
        culture property."/>
    <title id='Description'>jqxDateTimeInput provides support for localizing its input field and popup calendarfor different languages 
        and date formats. Each localization is contained within
        its own file with the language code appended to the name, e.g. jquery.glob.de-DE.js
        for German. The desired localization file should be loaded along with the jqxdatetimeinput.js.
        The localization is set to the jqxDateTimeInput instance by setting the jqxDateTimeInput's
        culture property. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // define available cultures
                var availableCultures = ['Czech (Czech Republic)', 'German (Germany)', 'English (Canada)', 'English (United States)',
          'French (France)', 'Italian (Italy)', 'Japanese (Japan)', 'Hebrew (Israel)', 'Russian (Russia)', 'Croatian (Croatia)', 'Sanskrit (India)'
          ];

                // create a jqxDateTimeInput.
                $("#jqxDateTimeInput").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
                // create a ComboBox
                $("#jqxDropDownList").jqxDropDownList({ source: availableCultures, selectedIndex: 3, theme: theme, width: '200px', height: '25px' });
                // set the culture.
                $("#jqxDropDownList").bind('select', function (event) {
                    var index = event.args.index;
                    switch (index) {
                        case 0:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.cs-CZ.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'cs-CZ' });
                            });
                            break;
                        case 1:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.de-DE.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'de-DE' });
                            });
                            break;
                        case 2:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.en-CA.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'en-CA' });
                            });
                            break;
                        case 3:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.en-US.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'en-US' });
                            });
                            break;
                        case 4:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.fr-FR.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'fr-FR' });
                            });
                            break;
                        case 5:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.it-IT.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'it-IT' });
                            });
                            break;
                        case 6:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.ja-JP.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'ja-JP' });
                            });
                            break;
                        case 7:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.he-IL.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'he-IL' });
                            });
                            break;
                        case 8:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.ru-RU.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'ru-RU' });
                            });
                            break;
                        case 9:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.hr.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'hr' });
                            });
                            break;
                        case 10:
                            $.getScript('../../jqwidgets/globalization/jquery.glob.sa-IN.js', function () {
                                $("#jqxDateTimeInput").jqxDateTimeInput({ culture: 'sa-IN' });
                            });
                            break;
                    }
                });
            });
        </script>
        <div style='width: 300px;' id='jqxWidget'>
            <div id='jqxDateTimeInput'>
            </div>
            <br />
            <div>
                <div style='font-family: "Verdana", "sans-serif"; font-size: 13px;'>
                    Choose Culture</div>
                <br />
                <div id='jqxDropDownList'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
